﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Areas/Wijmo/Views/Shared/ViewMasterPage1.Master"
    Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    ComboBox
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <select id="tags">
        <option value="c++">c++</option>
        <option value="java">java</option>
        <option value="php">php</option>
        <option value="coldfusion">coldfusion</option>
        <option value="javascript">javascript</option>
        <option value="asp">asp</option>
        <option value="ruby">ruby</option>
        <option value="python">python</option>
        <option value="c">c</option>
        <option value="scala">scala</option>
        <option value="groovy">groovy</option>
        <option value="haskell">haskell</option>
        <option value="perl">perl</option>
        <option value="c++">c++</option>
        <option value="java">java</option>
        <option value="php">php</option>
    </select>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#tags").wijcombobox(
                {
                    showingAnimation: { effect: "blind" },
                    hidingAnimation: { effect: "blind" }
                }
            );

        });
    </script>
    <hr />
    <input id="tagsinput" />
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#tagsinput").wijcombobox(
            {
                showingAnimation: { effect: "blind" },
                hidingAnimation: { effect: "blind" },
                data: [
                        {
                            label: 'c++',
                            value: 'c++'
                        },
                        {
                            label: 'java',
                            value: 'java'
                        },
                        {
                            label: 'php',
                            value: 'php'
                        },
                        {
                            label: 'coldfusion',
                            value: 'coldfusion'
                        }, {
                            label: 'javascript',
                            value: 'javascript'
                        },
                        {
                            label: 'asp',
                            value: 'asp'
                        },
                        {
                            label: 'ruby',
                            value: 'ruby'
                        },
                        {
                            label: 'python',
                            value: 'python'
                        },
                        {
                            label: 'c',
                            value: 'c'
                        },
                        {
                            label: 'scala',
                            value: 'scala'
                        },
                        {
                            label: 'groovy',
                            value: 'groovy'
                        },
                        {
                            label: 'haskell',
                            value: 'haskell'
                        },
                        {
                            label: 'perl',
                            value: 'perl'
                        }
                    ]
            }
            );
        });
    </script>
    <hr />
    <input id="taginput" />
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            var testArray = generateData(30, 6);
            var myReader = new wijarrayreader([{
                name: 'label'
            }, {
                name: 'value'
            }, {
                name: 'selected',
                defaultValue: false
            }, {
                name: 'cells'
            }]);
            var datasourceOptions = {
                reader: myReader,
                data: testArray
            };
            var datasource = new wijdatasource({
                reader: myReader,
                data: testArray
            })
            $("#taginput").wijcombobox({
                data: datasource,
                dropdownWidth: 627,
                width: 150,
                columns: [{
                    name: 'header1'
                }, {
                    name: 'header2'
                }, {
                    name: 'header3'
                }, {
                    name: 'header4'
                }, {
                    name: 'header5'
                }, {
                    name: 'header6'
                }],
                select: function (i, d) {
                    $("#result").html(d.value);
                }
            });
        });
        function generateData(count, cell) {
            var arr = [];
            for (var i = 0; i < count; i++) {
                var o = {};
                o.label = 'label' + i;
                o.value = 'value' + i;
                var cells = [];
                for (var j = 0; j < cell; j++) {
                    cells.push('cell' + i + j);
                }
                o.cells = cells;
                arr.push(o);
            }
            return arr;
        }
    </script>
    <label id="result">
    </label>
    <hr />
    <input id="remotedata" style="width: 300px" />
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {

            var proxy = new wijhttpproxy({
                url: "http://localhost:9854/Wijmo/Wijmo/DemoList",
                dataType: "json",
                data: {},
                key: 'geonames'
            });

            var myReader = new wijarrayreader([{
                name: 'label',
                mapping: function (item) {
                    return item.name;
                }
            }, {
                name: 'value',
                mapping: function (item) {
                    return item.id;
                }
            }, {
                name: 'selected',
                defaultValue: false
            }]);


            var datasource = new wijdatasource({
                reader: myReader,
                proxy: proxy
            });
            $("#remotedata").wijcombobox({
                data: datasource,
                showTrigger: false,
                minLength: 4,
                select: function (i, d) {
                    $("#result").html(d.value);
                }
            });

        });
        
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolderCss" runat="server">
    <link href="<%=Html.AreaCssPath("Wijmo") %>base-reset.css" rel="stylesheet" type="text/css" />
    <link href="<%=Html.AreaCssPath("Wijmo") %>themes/wijmo/jquery.wijmo-open.0.8.2.css"
        rel="stylesheet" type="text/css" />
    <link href="<%=Html.AreaCssPath("Wijmo") %>themes/wijmo/jquery.ui.wijcombobox.css"
        rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolderScript" runat="server">
    <script src="<%=Html.AreaScriptPath("Wijmo") %>jquery.wijmo-open.0.8.2.min.js" type="text/javascript"></script>
    <script src="<%=Html.AreaScriptPath("Wijmo") %>jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="<%=Html.AreaScriptPath("Wijmo") %>wijmo/jquery.ui.wijdatasource.js"
        type="text/javascript"></script>
    <script src="<%=Html.AreaScriptPath("Wijmo") %>wijmo/jquery.ui.wijcombobox.js" type="text/javascript"></script>
</asp:Content>
